<script setup>

import {onMounted, ref} from 'vue';
import { computed } from 'vue';
// import { ComponentSize } from 'element-plus'
import { selectAttractionsByPage,selectAllAttractions,selectAllStar,selectAllTopic,insertHistory } from '@/api/yy/AttractionsHome.js';
import { addCollectByScenic } from '@/api/shouyePub.js';
import router from "@/router/index.js";
import {useRouter} from "vue-router";
// import * as constants from "node:constants";
//全部结果数量
const allNum = ref(0)//总数量
//当前页
const pageNum = ref(1);
//每页显示数量
const pageSize = ref(8);

//地区
const area = ref([
  {
    name: '北京',
    value: 1
  }, {
    name: '上海',
    value: 2
  }, {
    name: '广州',
    value: 3
  }, {
    name: '深圳',
    value: 4
  }, {
    name: '成都',
    value: 5
  }, {
    name: '重庆',
    value: 6
  }, {
    name: '杭州',
    value: 7
  }, {
    name: '南京',
    value: 8
  }
])
const adress = async ()=>{
  const trs =await selectAllAttractions();
  area.value = trs.data.data;
}
const value1 = ref('')
//主题
const theme = ref([
  {
    id:'1',
    name:'自然风光'
  },
  {
    id:'2',
    name:'历史文化'
  },
  {
    id:'3',
    name:'主题乐园'
  },
  {
    id:'4',
    name:'度假休闲'
  },
  {
    id:'5',
    name:'亲子游'
  },
  {
    id:'6',
    name:'探险刺激'
  },
])
const topic = async ()=>{
  const trs =await selectAllTopic();
  theme.value=trs.data;
}
const value2 = ref('')
//星级
const stars = ref([
  {
    id:'1',
    name:'5A'
  },
  {
    id:'2',
    name:'4A'
  },
  {
    id:'3',
    name:'3A'
  },
  {
    id:'4',
    name:'其他'
  }
])
const star = async ()=>{
  const trs =await selectAllStar();
  stars.value=trs.data
}
const value3 = ref('')
// 获取用户id
const id =localStorage.getItem('id');
// const userId = ref('1');
const uid = ref(BigInt(id));
//景点
const attractions = ref([
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',


  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  }
])
const selectAll=async ()=>{
  const trs =await selectAttractionsByPage(pageNum.value,pageSize.value,value1.value,value2.value,value3.value,value4.value)
  attractions.value=trs.data.data.list
  console.log(trs)
  allNum.value=trs.data.data.total
}
//点击地区把当前id赋值给value1
const clickArea = (id)=>{
  value1.value=id
  selectAll()
}
//点击主题把当前id赋值给value2
const clickTheme = (id)=>{
  value2.value=id
  selectAll()
}
//点击星级把当前id赋值给value3
const clickStar = (id)=>{
  value3.value=id
  selectAll()
}
//搜索框
const search = ref('')
const value4 = ref('')
const clickSearch = ()=>{
  value4.value = search.value
  selectAll()
}
//分页
const handleSizeChange = (val) => {
  pageSize.value=val
  selectAll()
}
const handleCurrentChange = (val) => {
  pageNum.value=val
  selectAll()
}

onMounted(async ()=>{
  await adress()
  await topic()
  await star()
  await selectAll()
})
//点击事件（获取元素）
const items=document.querySelectorAll('.item1');
//点击事件（添加事件监听）
items.forEach(item=>{
  item.addEventListener('click',function (){
    const row =this.parentElement;
    const Items = row.querySelectorAll('.item1');
    Items.forEach(i=> i.classList.remove('active'));
    this.classList.add('active');
  })
})


//点击带着景点id跳转
const toAttraction = (id)=>{
  insertHistory1(id)
  // updateViewsById1(id)
  router.push({path:'/attractionsDetail',query:{id:id}})
}

const data = ref({
  good:'',
  classification:2,
})

//浏览记录
const insertHistory1 = async (id)=>{
  data.value.good=id
  console.log(data.value)
  const trs =await insertHistory(data.value)
  console.log(trs)
}

//添加收藏
const insertCollection = async (id)=>{
  const trs =await addCollectByScenic(id)
  selectAll()
  console.log(trs)
}

</script>

<template>

      <div class="common-layout"style="width: 1190px;margin: 0 auto">
            <div class="demo-collapse">
              <!--          搜索框部分-->
              <div class="shang">
                <div class="search">
                  <div class="tu">
                    <img src="../../assets/yy/attractions/放大镜.png" alt="">
                  </div>
                  <div class="input">
                    <input type="text" placeholder="请输入目的地、景区名或关键字" v-model="search">
                  </div>
                  <div class="button">
                    <button @click="clickSearch">搜索</button>
                  </div>
                </div>
              </div>
              <!--          筛选条件-->
              <div class="xuanze">
                <div class="xuanze-shang">
                  <span>景区门票</span>
                </div>
                <div class="xia">
                  <div class="xia-1">
                    <span>{{allNum}}个符合条件的景区</span>
                  </div>
                  <div class="xia-2">
                    <div class="xia-2-zuo">
                      <span style="color: #999999">地区：</span>
                      <span  @click="clickArea('')">不限</span>
                    </div>
                    <div class="xia-2-zhong">
                      <ul>
                        <li class="item1" v-for="item in area" :key="item.id" @click="clickArea(item.id)" >
                          {{item.name}}
                        </li>
                      </ul>
                    </div>
                    <div class="xia-2-you">
                      <span>更多</span>
                    </div>
                  </div>
                  <div class="xia-3">
                    <div class="xia-3-zuo">
                      <span style="color: #999999">主题：</span>
                      <span @click="clickTheme('')">不限</span>
                    </div>
                    <div class="xia-3-zhong">
                      <ul>
                        <li class="item1" v-for="item in theme" :key="item.id" @click="clickTheme(item.id)">{{item.name}}</li>
                      </ul>
                    </div>
                    <div class="xia-3-you">
                      <span>更多</span>
                    </div>
                  </div>
                  <div class="xia-4">
                    <div class="xia-4-zuo">
                      <span style="color: #999999">星级：</span>
                      <span @click="clickStar('')">不限</span>
                    </div>
                    <div class="xia-4-zhong">
                      <ul>
                        <li class="item1" v-for="item in stars" :key="item.id" @click="clickStar(item.id)">{{item.name}}</li>
                      </ul>
                    </div>
                    <div class="xia-4-you">
                      <span>更多</span>
                    </div>
                  </div>
                </div>
              </div>
              <!--          景点展示-->
              <div class="jingdian">
                <div class="show" style="margin-left: 20px">
                  <ul>
                    <li v-for="item in attractions" :key="item">
                      <div class="show-shang">
                        <div class="show-zuo">
                          <img :src="item.image" alt="">
                        </div>
                        <div class="show-zhong">

                          <h1 style="font-weight: 300">{{item.name}}</h1>
                          <p>5A景区</p>
                          <p>地址：{{item.detailedAddress}}</p>
                          <p>特色：{{item.introduce}}</p>
                        </div>
                        <div class="show-you" style="position: relative">
                          <span href="#" style="width: 44px;height: 40px;position: absolute;right: -15px;top: -14px; overflow: hidden" class="dianjishoucang" @click="insertCollection(item.id)">
                            <img src="https://img1.40017.cn/cn/s/list/2015/0803/public.png?v=124" :class='item.collectionCount==0?"shoucang1":"shoucang2" ' >
                          </span>
                          <p><span>￥</span>{{item.price}}<span>起</span></p>
                          <button  @click="toAttraction(item.id)" style="background-color: #FF6000">查看详细</button>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="fenye">
                  <div class="demo-pagination-block">
                    <el-pagination
                        v-model:current-page="pageNum"
                        v-model:page-size="pageSize"
                        :disabled="disabled"
                        :background="background"
                        layout="total,prev, pager, next, jumper"
                        :total="allNum"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                  </div>
                </div>
              </div>
            </div>
      </div>




</template>

<style scoped lang="less">
.shoucang1{
  position: relative;top: -150px;left: -104px
}
.shoucang2{
  position: relative;top: -150px;left: -20px;
}
.el-pagination{
  margin: 0 auto;
  padding-left: 409px;
  padding-top: 5px;
}
.demo-collapse{
  width: 100%;
  height: 2000px;
}
.shang{
  width: 98%;
  height: 70px;
  margin: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 23px;
  background-color: white;

}
.search{
  width: 60%;
  height: 50px;
  margin: 10px 0px 10px 0px;
  border:2px solid #FF7800;
  display: flex;
  align-content: center;
  justify-content: space-between;
  border-radius: 5px;
}
.tu{
  width:50px;
  height: 50px;
}
.tu img{
  height: 30px;
  width: 30px;
  padding: 10px;
}
.input{
  width: 80%;
}
.input input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 14px;
}
.button{
  width: 20%;
  background-color: #FF7800;
}
.button button{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: white;
  background-color:  #FF7800;
  font-size: 20px;
}
.xuanze{
  width: 100%;
  height: 220px;
  background-color: white;
  margin: 20px;
  padding-top: 15px;
}
.xuanze-shang{
  width: 10%;
  height: 40px;
  background-color:#FF7800;
  display: flex;
  align-content: space-between;
  justify-content: center;
  margin-left: 20px;
  position: relative;
}
.xuanze-shang span{
  width: 80%;
  height: 80%;
  color: white;
  font-size: 20px;
  margin: 0 auto;
  position: absolute;
  top: 6px;
  left: 17px;

}
.xia{
  width: 100%;
  border-top: 2px #FF7800 solid;
  height: 100%;
}
.xia-1{
  height: 11%;
  width: 100%;
  display: block;
  span{
    line-height: 60px;
    height: 100%;
    font-size: 16px;
    margin-left: 20px;
    margin-top: 20px;
    text-align: center;
  }
}
.xia-2{
  height: 12%;
  width: 100%;
  margin-top: 25px;
  span{
    height: 10%;
    line-height: 30px;
    margin-left: 20px;
    font-size: 16px;
  }
  ul{
    line-height: 30px;
    li{
      width: 40px;
      height: 20px;
      display: inline-block;
      margin-left: 20px;
      font-size: 14px;
    }
  }
}
.xia-2-you{
  float: right;
  span{
    margin-right: 20px;
  }
}
.xia-2-zhong{
  float: left;
}
.xia-2-zuo{
  float: left;
}
.xia-3{
  height: 12%;
  width: 100%;
  margin-top: 15px;

  span{
    height: 15%;
    line-height: 30px;
    margin-left: 20px;
    font-size: 16px;
  }
  ul{
    line-height: 30px;
    margin-left: 20px;

    li{
      width: 80px;
      height: 33px;
      display: inline-block;
      font-size: 14px;
    }
  }
}
.xia-3-you{
  float: right;
  span{
    margin-right: 20px;
  }
}
.xia-3-zhong{
  float: left;
}
.xia-3-zuo{
  float: left;

}
.xia-4{
  height: 15%;
  width: 100%;
  margin-top: 15px;

  span{
    height: 15%;
    line-height: 30px;
    margin-left: 20px;
    font-size: 16px;
  }
  ul{
    line-height: 30px;
    li{
      width: 40px;
      height: 20px;
      display: inline-block;
      margin-left: 20px;
      font-size: 14px;
    }
  }
}
.xia-4-you{
  float: right;
  span{
    margin-right: 20px;
  }
}
.xia-4-zhong{
  float: left;
}
.xia-4-zuo{
  float: left;
}
.jingdian{
  width: 100%;
  height:1400px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.show{
  width: 100%;
  background-color: white;
  ul{
    width: 100%;
    height:100%;
    li{
      width: 100%;
      height: 173px;
      background-color: white;
      border-bottom: 1px solid #999999;
      padding-top: 10px;
    }
  }
}

.show-shang{
  width: 100%;
  height: 155px;
  display: flex;
}
.show-zuo{
  width: 21%;
  height: 100%;
  margin: 0 auto;
  img{
    width: 240px;
    height: 135px;
    margin-top: 10px;
    margin-left: 15px;
  }
}
.show-zhong{
  width: 50%;
  height: 100%;
  margin: 0 auto;
  h1{
    color: #00a0ff;
    font-size: 28px;
    font-family: 黑体;
    margin-top: 10px;
  }
  p:nth-of-type(1){
    width: 60px;
    border: 1px solid #FF7800;
    padding-left: 5px;
    color:#FF7800;
    margin: 20px 0px 10px 0px;
  }
  p:nth-of-type(2){
    margin: 8px 0px 8px 0px;
    font-size: 13px;
  }
  p:nth-of-type(3){
    margin: 8px 0px 8px 0px;
    font-size: 13px;
  }
}
.show-you{
  width: 22%;
  height: 100%;
  margin: 0 auto;
  p{
    height: 40%;
    width: 100%;
    padding-top: 30px;
    padding-left: 85px;
    font-size: 35px;
    color: #FF7800;
    span:nth-of-type(1){
      margin: 0px 5px 0px 5px;
      font-size:16px;
      color: #FF7800;
    }
    span:nth-of-type(2){
      margin: 0px 5px 0px 5px;
      font-size:16px;
      color: black;
    }
  }
  button {
    width: 120px;
    height: 42px;
    background-color: orangered;
    border: 1px solid orangered;
    color: white;
    margin-left: 50px;
    margin-top: -5px;
    font-size: 24px;
    border-radius: 5px;
  }
}
.fenye{
  width: 100%;
  height: 40px;
  background-color: white;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 20px;
  ul{
    width: 100%;
    height: 100%;
    li{
      width: 100px;
      height: 50px;
      background-color: orangered;
      margin-left: 20px;
      margin-top: 20px;
      color: white;
      font-size: 20px;
      line-height: 50px;
      text-align: center;
    }
  }
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.item1.active {
  color: orangered;
  font-weight: bold;
}

.item1:hover:not(.active) {
  color: orangered;
  font-weight: bold;
}
</style>